import React, { HTMLAttributes } from "react";
import styled from "styled-components";

import { icons } from "../shared/icons";

const Svg = styled.svg<IconProps>`
	display: ${(props) => (props.block ? "block" : "inline-block")};
	vertical-align: middle;

	shape-rendering: inherit;
	transform: translate3d(0, 0, 0);
`;

const Path = styled.path<PathProps>`
	fill: ${(props) => props.color};
`;

export interface IconProps extends HTMLAttributes<SVGAElement> {
	/** 图标名*/
	icon: keyof typeof icons;
	/** 是否块级元素 */
	block?: boolean;
	/** 颜色 */
	color?: string;
}

export interface PathProps extends HTMLAttributes<SVGAElement> {
}

export function Icon(props: IconProps) {
  const { block, icon, color } = props;
	// return (
	// 	<Svg
	// 		viewBox="0 0 1024 1024"
	// 		width="20px"
	// 		height="20px"
	// 		block={block}
	// 		{...props}
	// 	>
	// 		<Path d={icons[icon]} color={color} />
	// 	</Svg>
  // );
  return React.createElement(Svg, {
    viewBox: "0 0 1024 1024",
    width: "20px",
    height: "20px",
    block: block,
    'data-testid': 'icon-svg',
    ...props
  }, React.createElement(Path, {
    d: icons[icon],
    color: color,
    // 'data-testid': 'icon-path' // 跑测试时使用
  }))
}
Icon.defaultProps = {
	block: false,
	color: "black",
};
